<template>
  <div class="liveSet">
    <div class="form-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>礼包销售统计</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="table-bar">
      <div>
        主题活动：
        <el-select
          v-model="activityId"
          multiple
          style="margin-right: 30px"
          :multiple-limit="1"
          filterable
          remote
          @change="selectActivity"
          reserve-keyword
          placeholder="请输入活动关键词选择"
          :remote-method="getActivityList"
          :loading="loading"
        >
          <el-option
            v-for="item in activityList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <span>卖场：</span>
        <el-select
          v-model="marketId"
          clearable
          @change="selectMarket"
          filterable
          placeholder="请选择卖场"
        >
          <el-option
            v-for="item in marketList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
		<span>&nbsp;&nbsp;团队：</span>
		<el-select
		  v-model="team_id"
		  clearable
		  @change="selectTeam"
		  filterable
		  placeholder="请选择团队"
		>
		  <el-option
		    v-for="item in teamList"
		    :key="item.id"
		    :label="item.title"
		    :value="item.id"
		  >
		  </el-option>
		</el-select>
		<span>&nbsp;&nbsp;商户：</span>
		<el-select
		  v-model="store_id"
		  clearable
		  @change="selectStore"
		  filterable
		  placeholder="请选择商户"
		>
		  <el-option
		    v-for="item in storeList"
		    :key="item.id"
		    :label="item.store_name"
		    :value="item.id"
		  >
		  </el-option>
		</el-select>
        <el-button
          type="primary"
          size="medium"
          @click="putFile"
          style="margin-left: 20px"
          >导出</el-button
        >
      </div>
      <div class="inputSearch">
        <el-input
          placeholder="输入品牌搜索"
          v-model="keyword"
          clearable
          @input="clearInput"
          @keyup.enter.native="searchInput"
        ></el-input>
        <el-button type="primary" size="medium" @click="searchInput"
          >搜索</el-button
        >
      </div>
    </div>
    <div style="padding:20px 20px 0">
      选择礼包：
      <el-select
        v-model="amount"
        @change="selectAmount"
        filterable
        placeholder="请选择礼包"
      >
        <el-option label="1.11 礼包" :value="1.11"></el-option>
        <el-option label="1.99 礼包" :value="1.99"></el-option>
        <el-option label="168 礼包" :value="30"></el-option>
        <el-option label="19.8 礼包" :value="10"></el-option>
      </el-select>
    </div>
    <div class="partnerList_table" style="margin-top: 20px">
      <div class="partnerList_bottom_table">
        <table>
          <tr>
            <th></th>
            <th>序号</th>
			      <th>团队</th>
            <th>店铺名称</th>
            <th>店铺id</th>
            <th>员工昵称</th>
            <th>员工id</th>
            <th>金额</th>
            <th>销售数量</th>
            <!-- <th>1.11礼包销售数量</th>
            <th>1.99礼包销售数量</th>
            <th>168礼包销售数量</th>
            <th>19.8礼包销售数量</th> -->
          </tr>
          <tr v-for="(v, i) in tableList" :key="i">
            <td>
              <font
                class="checkbox"
                :class="{ check_active: checkBoxAll.includes(i) }"
                @click="handlerCheckbox(i)"
                ><i class="el-icon-check"></i
              ></font>
            </td>
            <td>{{ i + 1 + (page - 1) * pageSize }}</td>
            <td>{{ v.team_name }}</td>
            <td>{{ v.store_name }}</td>
			      <td>{{ v.store_id }}</td>
            <td>{{ v.nickname }}</td>
            <td>{{ v.receiver_uid }}</td>
            <td>{{ v.amount }}</td>
            <td>{{ v.statis_num }}</td>
            <!-- <td>{{ v.price1 }}</td>
            <td>{{ v.price2 }}</td>
            <td>{{ v.price3 }}</td>
            <td>{{ v.price4 }}</td> -->
          </tr>
          <tr v-if="tableList.length == 0">
            <td class="table_title" colspan="10">当前数据空空如也</td>
          </tr>
        </table>
        <div class="partnerList_bottom_page">
          <div class="partnerList_bottom_page_left">
            <div
              class="partnerList_bottom_page_left_checkAll"
              @click="handerCheckAll"
            >
              <font class="checkbox" :class="{ check_active: checkAll }"
                ><i class="el-icon-check"></i
              ></font>
            </div>
            全选
            <!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
          </div>
          <div class="partnerList_bottom_page_right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              background
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkAll: false,
      page: 1,
      pageSize: 10,
      total: 0,
      checkBoxAll: [], // 选中的数据
      shelvesAlls: [],
      tableList: [],
      keyword: "",
      code: "",
      activity_id: "", //主活动id
      fatherName: "", //主活动名称
      activityId: "", //活动id
      activityList: [], //活动列表
      marketId: "", //卖场id
      marketList: [],
      loading:false,
	  teamList:[],
	  team_id:'',//团队id
	  storeList:[],
	  store_id:'',
    amount:1.11,//礼包金额
    };
  },
  mounted() {
    this.getSetList();
    this.remoteMethod();
	this.getTeamAll();
	this.getStoreAll();
  },
  methods: {
    // 获取卖场列表
    remoteMethod() {
      this.$http.post("/api/root/Market/marketList").then((res) => {
        console.log(res, "卖场列表");
        if (res.code == 1) {
          this.marketList = res.data ? res.data : [];
        }
      });
    },
    // 选择卖场
    selectMarket() {
      this.page = 1;
      this.pageSize = 10;
      this.getSetList();
    },
	//选择团队
	selectTeam(){
		this.page = 1;
		this.pageSize = 10;
		this.getSetList();
	},
	//获取团队下拉选择数据
	getTeamAll(){
		this.$http.post("/api/root/activity/team/list").then((res) => {
		  if (res.code == 1) {
		    this.teamList = res.data.teams ? res.data.teams : [];
		  }
		});
	},
	//选择团队下的商户
	selectStore(){
		this.page = 1;
		this.pageSize = 10;
		// if(!this.team_id || this.team_id==''){
		// 	this.$message.warning('请先选择团队')
		// 	return;
		// }
		this.getSetList();
	},
	//获取商户列表
	getStoreAll() {
	  this.$http.post("/api/root/store/select/all").then((res) => {
	    if (res.code == 1) {
	      this.storeList = res.data ? res.data : [];
	    }
	  });
	},
    // 获取活动列表o
    getActivityList(query) {
      console.log(query);
      let params = {
        keyword: query,
        page: this.page,
        pagesize: this.pageSize,
        code: this.code,
        type: 2,
        market_id: this.marketId,
      };
      this.$http.post("/api/root/activity/lists", params).then((res) => {
        console.log(res, "活动列表");
        if (res.code == 1) {
          this.activityList = res.data.data ? res.data.data : [];
          this.total = res.data.count;
        }
      });
    },

    // 选择活动
    selectActivity() {
      console.log(this.activityId);
      this.page = 1;
      this.pageSize = 10;
      this.getSetList();
    },

    // 获取活动商品列表o
    getSetList() {
      let params = {
        keyword: this.keyword,
        page: this.page,
        pagesize: this.pageSize,
        activity_id: this.activityId.length ? this.activityId[0] : "",
        market_id: this.marketId,
        team_id:this.team_id,
        store_id:this.store_id,
        amount:this.amount,
      };
      this.$http
        .post("/api/root/activity/giftbag/statis", params)
        .then((res) => {
          console.log(res, "礼包销售统计列表");
          if (res.code == 1) {
            this.tableList = res.data.records ? res.data.records : [];
            this.total = res.data.count;
          }
        });
    },

    // 节目列表
    toParty(id) {
      this.$router.push({ name: "partyList", query: { id } });
    },

    // 搜索
    searchInput() {
      if (this.keyword != "") {
        this.page = 1;
        this.pageSize = 10;
        this.getSetList();
      }
    },
    // 清空输入框
    clearInput() {
      if (this.keyword == "") {
        this.page = 1;
        this.pageSize = 10;
        this.getSetList();
      }
    },
    // 导出按钮
    putFile() {
      var a = document.createElement("a");
      let activity_id = this.activityId.length ? this.activityId[0] : "";
      a.setAttribute(
        "href",
        `/api/root/activity/giftbag/export?keyword=${this.keyword}&activity_id=${activity_id}&market_id=${this.marketId}`
      );
      a.setAttribute("target", "_blank");
      a.setAttribute("id", "startTelMedicine");
      // 防止反复添加
      if (document.getElementById("startTelMedicine")) {
        document.body.removeChild(document.getElementById("startTelMedicine"));
      }
      document.body.appendChild(a);
      a.click();
    },

    // 选择礼包金额
    selectAmount(){
      this.page = 1;
      this.pageSize = 10;
      this.getSetList()
    },

    // 添加活动按钮
    handleAdd() {
      this.$router.push({ name: "activityGoodsAdd", query: {} });
    },

    // 删除按钮
    toDel(id) {
      this.$confirm("此操作将删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http.post("/api/root/activity/good/del", { id }).then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.getSetList();
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } else {
            this.$message.warning(res.msg);
          }
        });
      });
    },

    // 编辑按钮
    toEdit(id) {
      this.$router.push({ name: "activityGoodsAdd", query: { id } });
    },

    // 更改状态
    toChange(id, sta) {
      let params = {
        id,
        status: sta == 1 ? 0 : 1,
      };
      this.$http.post("/api/root/activity/son/status", params).then((res) => {
        console.log(res, "更改状态");
        if (res.code == 1) {
          this.$message.success("更改成功");
          this.getSetList();
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    

    // 多选
    handlerCheckbox(i) {
      console.log(i);
      let arr = this.checkBoxAll;
      if (arr.includes(i)) {
        let index = arr.indexOf(i);
        if (index != -1) {
          arr.splice(index, 1);
          this.shelvesAlls.splice(index, 1);
          if (this.checkBoxAll.length !== this.tableList.length) {
            this.checkAll = false;
          }
        }
      } else {
        this.checkBoxAll.push(i);
        this.shelvesAlls.push(this.tableList[i].id);
        if (this.checkBoxAll.length == this.tableList.length) {
          this.checkAll = true;
        }
      }
      console.log(this.shelvesAlls);
    },
    // 全选与全不选
    handerCheckAll() {
      this.checkAll = !this.checkAll;
      let arr = this.tableList.length;
      this.checkBoxAll = [];
      this.shelvesAlls = [];
      if (this.checkAll) {
        for (let i = 0; i < arr; i++) {
          this.checkBoxAll.push(i);
        }
        this.checkBoxAll.map((v) => {
          this.shelvesAlls.push(this.tableList[v].id.toString());
        });
      } else {
        this.checkBoxAll = [];
        this.shelvesAlls = [];
      }
      console.log(this.shelvesAlls);
    },

    //更改直播配置
    // toChange(id,sta){
    //     let status = sta==0?1:0;
    //     this.$http.post('/api/root/SystemConfig/changeStatus',{id,status}).then(res=>{
    //         console.log(res,'直播配置结果');
    //         if(res.code==1){
    //             this.$message.success('操作成功')
    //             this.getSetList()
    //         }else{
    //             this.$message.warning(res.msg)
    //         }
    //     })
    // },

    handleSizeChange(val) {
      this.page = 1;
      this.pageSize = val;
      this.getSetList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getSetList();
    },
  },
};
</script>
<style lang="less" scoped>
@import "index.less";
</style>